<!-- 项目经历 -->
<script lang="ts" setup>
import { ref } from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue'
const currentPage = ref(4)
const pageSize = ref(3)
</script>

<template>
  <page-container title="项目经历">
    <template #extra>
      <el-button type="primary">添加项目</el-button>
    </template>
    <!-- 表单区域 -->
    <el-form inline>
      <el-form-item label="项目标题：" style="width: 300px">
        <el-select>
          <el-option label="微信小程序" value="qianduan"></el-option>
          <el-option label="兔仙儿小程序" value="Vue"></el-option>
          <el-option label="西西软件" value="go"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布状态：" style="width: 300px">
        <el-select>
          <el-option label="已发布" value="已发布"></el-option>
          <el-option label="草稿" value="草稿"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">搜索</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 正文区域 -->
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="card" v-for="n in 7" :key="n">
              <img
                src="@/assets/ProjectExperience.png"
                alt="Handshake"
                width="150px"
              />
              <div class="content">
                <h2>海外静态IP代理：轻松访问多元网络</h2>
                <p>
                  在当今全球化的时代，互联网已经成为人们生活和工作中不可或缺的一部分。
                  然而，有时候我们会无法访问某些网站或服务，这时候海外静态IP代理就成为了一种解决方案。
                  本文将探讨海外静态IP代理的优势以及如何轻松访问网络。
                  在当今全球化的时代，互联网已经成为人们生活和工作中不可或缺的一部分。
                  然而，有时候我们会无法访问某些网站或服务，这时候海外静态IP代理就成为了一种解决方案。
                  本文将探讨海外静态IP代理的优势以及如何轻松访问网络。
                </p>
                <div class="button-edit-delete">
                  <el-button type="primary" :icon="Edit" circle />
                  <el-button type="danger" :icon="Delete" circle />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[2, 3, 4, 5, 10]"
      background
      layout="jumper, total, sizes, prev, pager, next"
      :total="10"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </page-container>
</template>

<style lang="scss" scoped>
.el-main {
  max-height: 600px; /* 设置内容容器的最大高度 */
  overflow-y: auto; /* 当内容超过最大高度时，显示垂直滚动条 */
  padding: 15px;

  .card {
    display: flex;
    align-items: flex-start;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 20px;

    img {
      width: 150px;
      height: 100px;
      margin-right: 20px;
      border-radius: 4px;
    }

    .content {
      flex: 1; /* 让内容区域占据剩余空间 */
      h2 {
        margin: 0;
        font-size: 20px;
        color: #333;
      }

      p {
        margin-top: 15px;
        color: #666;
        font-size: 15px;
        line-height: 1.5;
        display: -webkit-box; /* 使用 Flexbox 的子集 Box Layout 模型 */
        -webkit-box-orient: vertical; /* 垂直排列子元素 */
        -webkit-line-clamp: 2; /* 限制显示两行 */
        overflow: hidden; /* 隐藏溢出的内容 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
      }
      .button-edit-delete {
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
        .el-button {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
